<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.v-show</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
            v-show 写法:v-show ="表达式" 
            适用于:切换频率较高的场景
            特点:不展示DOM元素依然在,仅仅是使用样式隐藏掉
            indexOf indexOf()的用法：返回字符中indexof（string）中字串string在父串中首次出现的位置，
            从0开始！没有返回-1；方便判断和截取字符串！
         -->
    <!-- 准备好一个容器-->
    <div id="demo">
        <h2>当前的和为:{{sum}}</h2>
        <button @click="sum++">点我+1</button>
        <h2 v-show="sum ===1">Angular</h2>
        <h2 v-show="sum ===2">React</h2>
        <h2 v-show="sum ===3">Vue</h2>
        <h2 v-show="[1,2,3].indexOf(sum)===-1">未知</h2>
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    new Vue({
        el: '#demo',
        data: {
            sum: 0
        }
    })
</script>

</html>